<template>
  <view class="my-container">
    <!-- 顶部用户信息卡片 -->
    <view class="user-info-card">
      <view class="user-bg-effects">
        <view class="user-bg-circle circle-1"></view>
        <view class="user-bg-circle circle-2"></view>
        <view class="user-bg-circle circle-3"></view>
      </view>
      
      <view class="user-header">
        <view class="avatar-box">
          <image class="avatar-image" src="/static/5G_black.png" mode="aspectFill"></image>
          <view class="avatar-badge">
            <u-icon name="checkmark" size="12" color="#fff"></u-icon>
          </view>
        </view>
        <view class="user-details">
          <view class="user-name">{{ userInfo.name }}</view>
          <view class="user-role">{{ userInfo.department }}</view>
          <view class="user-phone">{{ userInfo.phone }}</view>
        </view>
      </view>
      
      <view class="user-stats">
        <view class="stat-divider"></view>
        <view class="user-stat-item">
          <text class="stat-value">{{ statistics.groupCount }}</text>
          <text class="stat-label">负责集团</text>
        </view>
        <view class="user-stat-item">
          <text class="stat-value">{{ statistics.followCount }}</text>
          <text class="stat-label">成员跟进</text>
        </view>
        <view class="user-stat-item">
          <text class="stat-value">{{ statistics.amount }}万</text>
          <text class="stat-label">预计金额</text>
        </view>
      </view>
    </view>

    <!-- 数据面板 -->
    <view class="data-panel animate-card">
      <view class="panel-header">
        <view class="panel-title">本月工作数据</view>
        <view class="panel-subtitle">
          <text class="date-text">{{ getCurrentMonth() }}</text>
          <u-icon name="calendar" size="14" color="#909399"></u-icon>
        </view>
      </view>
      
      <view class="data-overview">
        <view class="overview-item">
          <view class="overview-value">
            <text class="value-num">{{ statistics.completedOpportunities }}</text>
            <text class="value-unit">/{{ statistics.totalOpportunities }}</text>
          </view>
          <view class="overview-label">已落地商机</view>
          <view class="overview-progress">
            <view 
              class="progress-bar" 
              :style="{width: (statistics.completedOpportunities / statistics.totalOpportunities * 100) + '%'}">
            </view>
          </view>
        </view>
        
        <view class="overview-item">
          <view class="overview-value">
            <text class="value-num">{{ statistics.expansionCount }}</text>
            <text class="value-unit">条</text>
          </view>
          <view class="overview-label">拓展商机</view>
          <view class="overview-progress">
            <view 
              class="progress-bar" 
              style="width: 75%; background: linear-gradient(to right, #19be6b, #87e8b7);">
            </view>
          </view>
        </view>
      </view>
      
      <view class="performance-chart">
        <view class="chart-title">
          <text>业绩趋势</text>
          <view class="chart-legend">
            <view class="legend-item">
              <view class="legend-color"></view>
              <text>商机金额(万元)</text>
            </view>
          </view>
        </view>
        
        <view class="chart-container">
          <view 
            class="chart-bar"
            :class="'bar-delay-' + index"
            v-for="(item, index) in performanceData" 
            :key="index"
            :style="{
              height: (item.value / getMaxValue() * 100) + '%', 
              opacity: 1
            }"
          >
            <text class="bar-value">{{ item.value }}</text>
            <text class="bar-label">{{ item.month }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能面板 -->
    <view class="function-panel animate-card">
      <view class="panel-title">常用功能</view>
      <view class="function-list">
        <view class="function-item" @click="switchTab('/pages/business/index')">
          <view class="function-icon icon-business">
            <image src="/static/tabbar/shangji.png" class="function-image"></image>
          </view>
          <text class="function-name">商机管理</text>
        </view>
        <view class="function-item" @click="switchTab('/pages/statistics/index')">
          <view class="function-icon icon-stats">
            <image src="/static/tabbar/stats.png" class="function-image"></image>
          </view>
          <text class="function-name">数据统计</text>
        </view>
        <view class="function-item" @click="switchTab('/pages/todo/index')">
          <view class="function-icon icon-todo">
            <image src="/static/tabbar/todo.png" class="function-image"></image>
          </view>
          <text class="function-name">待办提醒</text>
        </view>
        <view class="function-item" @click="switchTab('/pages/group/index')">
          <view class="function-icon icon-group">
            <image src="/static/tabbar/group.png" class="function-image"></image>
          </view>
          <text class="function-name">集团档案</text>
        </view>
      </view>
    </view>

    <!-- 设置面板 -->
    <view class="settings-panel animate-card">
      <view class="panel-title">设置</view>
      <view class="settings-list">
        <view class="settings-item" @click="navigateToTodo">
          <view class="item-left">
            <u-icon name="bell" size="20" color="#606266"></u-icon>
            <text class="item-name">待办事项</text>
          </view>
          <view class="item-right">
            <view class="item-badge">2</view>
            <u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="navigateToChangePassword">
          <view class="item-left">
            <u-icon name="lock" size="20" color="#606266"></u-icon>
            <text class="item-name">修改密码</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="showInDevelopment">
          <view class="item-left">
            <u-icon name="file-text" size="20" color="#606266"></u-icon>
            <text class="item-name">操作日志</text>
          </view>
          <view class="item-right">
            <text class="item-desc">即将上线</text>
            <u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="showInDevelopment">
          <view class="item-left">
            <u-icon name="info-circle" size="20" color="#606266"></u-icon>
            <text class="item-name">关于我们</text>
          </view>
          <view class="item-right">
            <text class="item-desc">v1.1.0</text>
            <u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="logout">
          <view class="item-left">
            <u-icon name="arrow-right" size="20" color="#f56c6c"></u-icon>
            <text class="item-name logout">退出登录</text>
          </view>
          <u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
        </view>
      </view>
    </view>
    
    <view class="footer-text">
      平凉移动政企事业部 © 2025
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: "",
        department: "",
        phone: "",
        position: ""
      },
      statistics: {
        groupCount: 0,
        followCount: 0,
        expansionCount: 0,
        amount: 0,
        totalOpportunities: 0,
        completedOpportunities: 0
      },
      performanceData: []
    };
  },
  onLoad() {
    // 加载个人信息和统计数据
    this.getUserInfo();
    this.getStatistics();
  },
  onShow() {
    // 页面显示时刷新数据
    console.log('我的页面显示');
    this.getUserInfo();
    this.getStatistics();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      uni.showLoading({
        title: "加载中"
      });
      
      this.$http
        .sendRequest("zhanke/user_info", "POST", {})
        .then(res => {
          if (res.data && res.data.code === 200 && res.data.data) {
            const userInfo = res.data.data;
            this.userInfo = {
              name: userInfo.name || "未设置",
              department: userInfo.department || "平凉政企事业部",
              position: "客户经理",
              phone: userInfo.phone ? userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : "未设置"
            };
            
            // 保存用户信息到本地存储
            uni.setStorageSync('userInfo', JSON.stringify(userInfo));
          } else {
            // 如果API请求失败，尝试从本地存储获取用户信息
            this.getUserInfoFromStorage();
            
            // 显示错误提示
            uni.showToast({
              title: res.data?.msg || "获取用户信息失败",
              icon: "none"
            });
          }
        })
        .catch(err => {
          console.error("获取用户信息请求失败", err);
          
          // 如果请求失败，尝试从本地存储获取用户信息
          this.getUserInfoFromStorage();
          
          uni.showToast({
            title: "网络请求失败，请稍后再试",
            icon: "none"
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 从本地存储获取用户信息
    getUserInfoFromStorage() {
      try {
        const userInfoStr = uni.getStorageSync('userInfo');
        if (userInfoStr) {
          const userInfo = JSON.parse(userInfoStr);
          this.userInfo = {
            name: userInfo.name || "未设置",
            department: userInfo.department || "平凉政企事业部",
            position: userInfo.position || "客户经理",
            phone: userInfo.phone ? userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : "未设置"
          };
        }
      } catch (e) {
        console.error('获取本地用户信息失败', e);
      }
    },
    
    // 获取统计数据
    getStatistics() {
      uni.showLoading({
        title: "加载中"
      });
      
      this.$http
        .sendRequest("zhanke/user_statistics", "POST", {})
        .then(res => {
          if (res.data && res.data.code === 200 && res.data.data) {
            const data = res.data.data;
            
            // 更新统计数据
            this.statistics = {
              groupCount: data.groupCount || 0,
              followCount: data.followCount || 0,
              expansionCount: data.expansionCount || 0,
              amount: data.amount || 0,
              totalOpportunities: data.totalOpportunities || 0,
              completedOpportunities: data.completedOpportunities || 0
            };
            
            // 更新业绩趋势数据
            if (data.performanceData && Array.isArray(data.performanceData)) {
              this.performanceData = data.performanceData;
            }
          } else {
            console.error("获取统计数据失败", res.data?.msg);
            
            // 使用默认数据
            this.useDefaultStatistics();
            
            uni.showToast({
              title: res.data?.msg || "获取统计数据失败",
              icon: "none"
            });
          }
        })
        .catch(err => {
          console.error("获取统计数据请求失败", err);
          
          // 使用默认数据
          this.useDefaultStatistics();
          
          uni.showToast({
            title: "网络请求失败，请稍后再试",
            icon: "none"
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    
    // 使用默认统计数据（当API请求失败时）
    useDefaultStatistics() {
      this.statistics = {
        groupCount: 0,
        followCount: 0,
        expansionCount: 0,
        amount: 0,
        totalOpportunities: 0,
        completedOpportunities: 0
      };
      
      this.performanceData = [
        { month: '1月', value: 0 },
        { month: '2月', value: 0 },
        { month: '3月', value: 0 },
        { month: '4月', value: 0 },
        { month: '5月', value: 0 },
        { month: '6月', value: 0 }
      ];
    },
    
    // 页面跳转
    navigateTo(url) {
      uni.navigateTo({
        url
      });
    },
    
    // 获取图表最大值
    getMaxValue() {
      if (!this.performanceData || this.performanceData.length === 0) {
        return 100; // 默认值
      }
      
      const maxVal = Math.max(...this.performanceData.map(item => item.value));
      // 增加20%的空间，让图表更加美观
      return maxVal * 1.2 || 100;
    },
    
    // 获取当前月份
    getCurrentMonth() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      return `${year}年${month}月`;
    },
    
    // 展示开发中提示
    showInDevelopment() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确认退出登录?',
        success: res => {
          if (res.confirm) {
            // 调用退出登录接口
            this.$http
              .sendRequest("zhanke/logout", "POST", {})
              .then(res => {
                if (res.data && res.data.code === 200) {
                  // 清理本地存储
                  uni.removeStorageSync('token');
                  uni.removeStorageSync('userInfo');
                  
                  // 重置Vuex用户信息
                  this.$u.vuex('vuex_user', {});
                  
                  // 跳转到登录页
                  uni.reLaunch({
                    url: '/pages/login/login'
                  });
                } else {
                  uni.showToast({
                    title: res.data?.msg || "退出登录失败",
                    icon: "none"
                  });
                }
              })
              .catch(err => {
                console.error("退出登录请求失败", err);
                
                // 即使请求失败也清理本地存储并跳转
                uni.removeStorageSync('token');
                uni.removeStorageSync('userInfo');
                
                // 重置Vuex用户信息
                this.$u.vuex('vuex_user', {});
                
                // 跳转到登录页
                uni.reLaunch({
                  url: '/pages/login/login'
                });
              });
          }
        }
      });
    },
    
    switchTab(url) {
      uni.switchTab({
        url
      });
    },
    
    navigateToTodo() {
      // 尝试使用switchTab如果是tabBar页面，否则使用navigateTo
      try {
        uni.switchTab({
          url: '/pages/todo/index',
          fail: (err) => {
            console.log('switchTab失败，尝试navigateTo', err);
            uni.navigateTo({
              url: '/pages/todo/index'
            });
          }
        });
      } catch (e) {
        console.error('导航到待办页面出错：', e);
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none'
        });
      }
    },
    
    // 跳转到修改密码页面
    navigateToChangePassword() {
      uni.navigateTo({
        url: '/pages/login/change-password'
      });
    }
  }
};
</script>

<style>
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes growUp {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

.my-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 30px;
}

.user-info-card {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8, #1e40af);
  padding: 60px 0 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(29, 78, 216, 0.18);
}

.user-bg-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.user-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 200px;
  height: 200px;
  top: -100px;
  right: -50px;
  animation: pulse 8s infinite ease-in-out;
}

.circle-2 {
  width: 150px;
  height: 150px;
  bottom: -50px;
  left: -50px;
  animation: pulse 10s infinite ease-in-out;
}

.circle-3 {
  width: 100px;
  height: 100px;
  bottom: 50px;
  right: 50px;
  animation: pulse 6s infinite ease-in-out;
}

.user-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  animation: fadeInLeft 0.8s ease-out;
}

.avatar-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.3);
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.avatar-box:active {
  transform: scale(0.94);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.avatar-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}

.avatar-box:active .avatar-image {
  transform: scale(1.1);
}

.avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(to right, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.user-details {
  margin-left: 15px;
}

.user-name {
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  position: relative;
  display: inline-block;
}

.user-name:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.3));
  border-radius: 1px;
}

.user-role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-phone {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 24px 0 15px;
  position: relative;
  animation: fadeIn 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

.stat-divider {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(to right, 
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.01));
}

.user-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.user-stat-item:active {
  transform: translateY(3px);
}

.stat-value {
  font-size: 22px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  background: linear-gradient(to right, #fff, #eff6ff);
  -webkit-background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.animate-card {
  animation: fadeIn 0.6s ease-out;
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
}

.data-panel {
  margin: 18px 15px;
  padding: 28px 24px;
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.data-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  /* background: linear-gradient(to right, #3b82f6, #60a5fa); */
}

.data-panel:active {
  transform: scale(0.985);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-title {
  font-size: 17px;
  font-weight: bold;
  color: #1f2937;
  position: relative;
  padding-left: 10px;
}

.panel-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
  border-radius: 2px;
}

.panel-subtitle {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background-color: #f3f4f6;
  border-radius: 12px;
  transition: all 0.3s;
}

.panel-subtitle:active {
  transform: scale(0.96);
  background-color: #e5e7eb;
}

.date-text {
  margin-right: 5px;
}

.data-overview {
  display: flex;
  margin-bottom: 20px;
}

.overview-item {
  flex: 1;
  padding: 0 10px;
  position: relative;
}

.overview-item:after {
  content: '';
  position: absolute;
  top: 15%;
  right: 0;
  height: 70%;
  width: 1px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01));
}

.overview-item:last-child:after {
  display: none;
}

.overview-value {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}

.value-num {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.value-unit {
  font-size: 14px;
  color: #6b7280;
  margin-left: 2px;
}

.overview-label {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 8px;
  font-weight: 500;
}

.overview-progress {
  height: 6px;
  background-color: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #60a5fa);
  border-radius: 3px;
  transition: width 1s ease-in-out;
  position: relative;
  overflow: hidden;
}

.progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, 
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0));
  animation: shine 2s infinite linear;
}

.performance-chart {
  margin-top: 24px;
}

.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #4b5563;
  font-weight: 500;
}

.chart-legend {
  display: flex;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #6b7280;
}

.legend-color {
  width: 10px;
  height: 10px;
  background: linear-gradient(to right, #3b82f6, #60a5fa);
  border-radius: 2px;
  margin-right: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 25px;
  position: relative;
}

.chart-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 1px;
  background-color: #e5e7eb;
}

@keyframes slideUp {
  from {
    height: 0;
    opacity: 0.5;
  }
  to {
    height: var(--chart-height);
    opacity: 1;
  }
}

.chart-bar {
  width: 30px;
  background: linear-gradient(to top, #3b82f6, #60a5fa);
  border-radius: 4px 4px 0 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  animation: growUp 0.8s ease-out forwards;
  transform-origin: bottom;
}

.bar-delay-0 { animation-delay: 0.1s; }
.bar-delay-1 { animation-delay: 0.2s; }
.bar-delay-2 { animation-delay: 0.3s; }
.bar-delay-3 { animation-delay: 0.4s; }
.bar-delay-4 { animation-delay: 0.5s; }
.bar-delay-5 { animation-delay: 0.6s; }

.chart-bar:hover, .chart-bar:active {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
  background: linear-gradient(to top, #2563eb, #3b82f6);
}

.bar-value {
  position: absolute;
  top: -20px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
  transition: all 0.3s ease;
}

.chart-bar:hover .bar-value {
  color: #1e40af;
  font-weight: bold;
  transform: scale(1.1);
}

.bar-label {
  position: absolute;
  bottom: -25px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}

.function-panel {
  margin: 18px 15px;
  padding: 28px 24px;
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
}

.function-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  /* background: linear-gradient(to right, #f43f5e, #fb7185); */
}

.function-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.function-item {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  transition: all 0.35s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.function-item:active {
  transform: translateY(6px) scale(0.95);
}

.function-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.2, 0.6, 0.3, 1);
  overflow: hidden;
  position: relative;
  will-change: transform, box-shadow;
}

.function-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: all 0.4s ease;
}

.function-item:active .function-icon::after {
  opacity: 1;
  transform: scale(2);
}

.function-item:active .function-icon {
  transform: scale(0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon-business {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}

.icon-stats {
  background: linear-gradient(145deg, #10b981, #059669);
}

.icon-todo {
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
}

.icon-group {
  background: linear-gradient(145deg, #f43f5e, #e11d48);
}

.function-image {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.function-item:active .function-image {
  transform: scale(1.15) rotate(-10deg);
}

.function-name {
  font-size: 13px;
  color: #4b5563;
  text-align: center;
  margin-top: 4px;
  font-weight: 500;
  transition: all 0.3s;
}

.function-item:active .function-name {
  color: #1f2937;
  font-weight: 600;
}

.settings-panel {
  margin: 18px 15px;
  padding: 28px 24px;
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
}

.settings-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  /* background: linear-gradient(to right, #6366f1, #8b5cf6); */
}

.settings-list {
  margin-top: 10px;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 8px;
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.3s ease;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item:active {
  background-color: #f9fafb;
  border-radius: 12px;
  transform: translateX(4px);
}

.item-left {
  display: flex;
  align-items: center;
}

.item-name {
  font-size: 15px;
  color: #1f2937;
  margin-left: 10px;
  font-weight: 500;
}

.item-right {
  display: flex;
  align-items: center;
}

.item-desc {
  font-size: 12px;
  color: #9ca3af;
  margin-right: 5px;
  padding: 2px 6px;
  background-color: #f3f4f6;
  border-radius: 10px;
}

.item-badge {
  background: linear-gradient(to right, #ef4444, #f87171);
  color: #fff;
  font-size: 12px;
  height: 18px;
  min-width: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 6px;
  margin-right: 5px;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.logout {
  color: #ef4444;
  font-weight: 600;
}

.footer-text {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  padding: 20px 0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

.notification-btn {
  position: absolute;
  top: 90rpx;
  right: 30rpx;
  z-index: 3;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  animation: pulse 8s infinite ease-in-out;
}
</style> 